window.onload = function () {
    var URL = window.URL || window.webkitURL;
    var $image = $('#cutImage');
    $("#showImg").hide();

    //选择框
    var $selectPhoto = $('#selectPhoto');
    //图片裁剪框
    var $cutPhoto = $('#cutPhoto');

    var uploadedImageName = '';
    var uploadedImageType = 'image/jpeg';
    var uploadedImageURL;


    var console = window.console || { log: function () {} };
    var options = {
        aspectRatio: 1 / 1, //裁剪框的宽高比
        viewMode: 1, //视图模式,默认为0:无限制,1:截取框不能移到图片外部,2:不全部铺满背景,3:全部铺满背景
        dragMode: 'move',//拖拽模式,默认为crop:产生一个新的裁剪框,可改变大小,move:可移动图片,none:不可移动图片
        preview: '.previewCut', //添加额外的元素(容器)以供预览
        autoCropArea: 0.5, //定义初始化裁剪框对比图片的比例大小,默认为0.8
        cropBoxResizable: true, //是否可以调整剪裁框的大小
        cropBoxMovable: true, //是否可以移动剪裁框
        crop: function (e) {
            window.console.log(Math.round(e.x));
            window.console.log(Math.round(e.y));
            window.console.log(Math.round(e.height));
            window.console.log(Math.round(e.width));
            window.console.log(e.rotate);
            window.console.log(e.scaleX);
            window.console.log(e.scaleY);
        }
    };

    // Cropper
    $image.on({
        ready: function (e) {
            //console.log(e.type);
        },
        cropstart: function (e) {
            //console.log(e.type, e.action);
        },
        cropmove: function (e) {
            //console.log(e.type, e.action);
        },
        cropend: function (e) {
            //console.log(e.type, e.action);
        },
        crop: function (e) {
            //console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
        },
        zoom: function (e) {
            //console.log(e.type, e.ratio);
        }
    }).cropper(options);

    $("#selectCut").click(function () {
        $selectPhoto.show();
        $cutPhoto.hide();
        $("#inputImage").val("");
        $("#showImg").hide();
    });

    $("#uploadCut").click(function () {
        var cas = $image.cropper('getCroppedCanvas',{ width: 180, height: 180 });
        if(cas == null){
            tip("请选择图片");
            return false;
        }else {
            var base64url = cas.toDataURL('image/jpeg');
            var base64Img = encodeURIComponent(base64url);
            // console.log("len:" + base64Img.length + "," + base64Img);
            $("#photoCutErr").css("color", "blue");
            $("#photoCutErr").html("头像上传中...");
            var data = {
                id: $("#id").val()
                , base64: base64Img
            };
            post($("#baseUrl").val() + 'account/uploadLogo.action', data, function (response) {
                if (response.code == 1) {
                    $("#currentLogo").attr("src", base64url);

                    $selectPhoto.show();
                    $cutPhoto.hide();
                    $("#inputImage").val("");
                    $("#showImg").hide();

                    $("#photoCutErr").css("color", "green");
                    $("#photoCutErr").html("上传成功");
                } else {
                    $("#photoCutErr").css("color", "red");
                    $("#photoCutErr").html(response.msg);
                }
            });
        }
    });


    var $inputImage = $('#inputImage');

    if (URL) {
        $inputImage.change(function () {
            var files = this.files;
            var file;

            if (!$image.data('cropper')) {
                return;
            }

            if (files && files.length) {
                file = files[0];

                if (/^image\/\w+$/.test(file.type)) {
                    uploadedImageName = file.name;
                    uploadedImageType = file.type;

                    if (uploadedImageURL) {
                        URL.revokeObjectURL(uploadedImageURL);
                    }

                    uploadedImageURL = URL.createObjectURL(file);
                    $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                    $inputImage.val('');

                    $selectPhoto.hide();
                    $cutPhoto.show();
                    $("#showImg").show();
                } else {
                    $("#photoCutErr").html("请选择图片文件");
                }
            }
        });
    } else {
        $inputImage.prop('disabled', true).parent().addClass('disabled');
    }
    

};